<template>
  <div class="main">

    <div class="shadow"></div>

    <div class="box">

      <div class="header">
        <div class="return" @click="$router.back()">
          <img src="../../../assets/image/paysafe/backimg.png" alt="">
          <span class="text">< 返回</span>
        </div>

        <span style="margin: 0 0.1rem">当前位置：</span>
        <el-breadcrumb separator-class="el-icon-d-arrow-right">
          <el-breadcrumb-item>资金安全</el-breadcrumb-item>
          <el-breadcrumb-item>
            <span style="color: #E22A1F !important;">{{ type == 1? '支付宝绑定' : '设置密码' }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="form" v-if="type == 1">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          label-position="right"
          :rules="rules"
          style="width: 100%; margin-top: 0.2rem"
        >
          <el-form-item label="支付宝账号:" prop="name">
            <el-input
              style="width: 3.48rem"
              placeholder="请输入"
              v-model="form.name"
            ></el-input>
          </el-form-item>

          <el-form-item label="真实姓名:">
            <el-input
              style="width: 3.48rem"
              placeholder="请输入"
              v-model="form.password"
            ></el-input>
          </el-form-item>

          <el-form-item label="图形验证码:">
            <div
              style="
                width: 100% !important;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <el-input
                style="width: 2.35rem; margin-right: 0.1rem"
                placeholder="图形验证码"
                v-model="form.password"
              >
              </el-input>
              <validate-code ref="ref_validateCode" />
            </div>
          </el-form-item>

          <el-form-item label="手机号:">
            <!-- <el-input
              style="width: 3.48rem"
              placeholder="请输入"
              v-model="form.confirmpassword"
            ></el-input> -->
            <div style="width: 3.48rem">18332789067</div>
          </el-form-item>

          <el-form-item label="手机验证码:">
            <div class="getCode">
              <el-input
                style="width: 2.35rem; margin-right: 0.1rem"
                placeholder="手机验证码"
                v-model="form.password"
              >
              </el-input>
              <div class="getCodeButton">获取验证码</div>
            </div>
          </el-form-item>
          
          <div class="loginbutton">立即绑定</div>
        </el-form>
      </div>

      <div class="form" v-if="type == 2">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          label-position="right"
          :rules="rules"
          style="width: 100%; margin-top: 0.2rem"
        >

          <el-form-item label="手机号:">
            <!-- <el-input
              style="width: 3.48rem"
              placeholder="请输入"
              v-model="form.confirmpassword"
            ></el-input> -->
            <div style="width: 3.48rem">18332789067</div>
          </el-form-item>

          <el-form-item label="图形验证码:">
            <div
              style="
                width: 100% !important;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <el-input
                style="width: 2.35rem; margin-right: 0.1rem"
                placeholder="图形验证码"
                v-model="form.password"
              >
              </el-input>
              <validate-code ref="ref_validateCode" />
            </div>
          </el-form-item>

          <el-form-item label="短信验证码:">
            <div class="getCode">
              <el-input
                style="width: 2.35rem; margin-right: 0.1rem"
                placeholder="短信验证码"
                v-model="form.password"
              >
              </el-input>
              <div class="getCodeButton">获取验证码</div>
            </div>
          </el-form-item>

          <el-form-item label="新支付密码:" prop="name">
            <el-input
              style="width: 3.48rem"
              placeholder="请输入"
              v-model="form.name"
            ></el-input>
          </el-form-item>

          <el-form-item label="确认密码:">
            <el-input
              style="width: 3.48rem"
              placeholder="请输入"
              v-model="form.password"
            ></el-input>
          </el-form-item>
          <div class="loginbutton">立即绑定</div>
        </el-form>
      </div>

    </div>
    

  </div>
</template>

<script>
import validateCode from "@/components/ValidateCode";
export default {
  components: {
    validateCode,
  },
  created () {
    this.type = this.$route.query.type
  },
  data() {
    return {
      type: 1,
      form: {
        name: "",
        password: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    }
  },
  methods: {
    
  }
}
</script>

<style scoped lang="scss">
.main {
  width: calc(100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: #FFFFFF;
  .shadow{
    flex-shrink: 0;
    width: 100%;
    height: 0.2rem;
    // background: #F5F5F5;
    background: linear-gradient(0deg,#FFFFFF , #F5F5F5);
  }
  .box{
    padding: 0rem 0.2rem;
    width: calc(100% - 0.4rem);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .header{
      width: 100%;
      height: 0.34rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.14rem;
      color: #3D3D3D;
      .return{
        width: 0.77rem;
        height: 0.34rem;
        position: relative;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .text{
          white-space: nowrap; 
          font-size: 0.14rem;
          color: #000000;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
      }
    }
    .form {
      width: 100%;
      height: auto;
      ::v-deep .el-input__prefix {
        color: #3d3c3c !important;
      }
      ::v-deep .el-input__inner {
        height: 0.4rem !important;
        background: #F5F7F9 !important;
      }
      ::v-deep .el-form-item{
        display: flex;
      }
      .loginbutton {
        margin-top: 0.12rem;
        margin-left: 1rem;
        width: 1.2rem;
        height: 0.36rem;
        border-radius: 0.2rem;
        background: #E22A1F;
        text-align: center;
        line-height: 0.36rem;
        color: #ffffff;
        font-size: 0.14rem;
        cursor: pointer;
      }
      .getCode {
        width: 100% !important;
        height: 0.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        ::v-deep .el-input__inner {
          height: 0.4rem !important;
        }
      }
      .getCodeButton {
        width: 1.02rem;
        height: 0.38rem;
        line-height: 0.38rem;
        text-align: center;
        cursor: pointer;
        color: #fa5555;
        border: 1px solid #e22a1f;
      }
      .message {
        margin-top: 0.15rem;
        width: 100%;
        text-align: center;
        font-family: PingFang SC;
        font-size: 0.14rem;
        color: #e22a1f;
        cursor: pointer;
      }
      .tologin {
        margin-top: 0.12rem;
        margin-left: calc(100% - 3.68rem);
        width: 3.68rem;
        text-align: left;
        color: #e22a1f;
        font-size: 0.16rem;
        cursor: pointer;
      }
    }
  }
}
</style>
